<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.pop_box{
				width:100vw;
				height:100vh;
				background: rgba(000, 000, 000, 0.5);
				position: absolute;
				top:0;
				left:0;
			}
			.tan-center{
				width:30%;
				height:30%;
				background-color: #ffffff;
				display: flex;
				
				
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="1" style="text-align: center;">
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>单价</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods">
					<td>{{index}}</td>
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td v-for="val in btn_config">{{val.text}}</td>
				</tr>
			</table>
			<!-- <div class="pop_box">
				<div class="tan-center">
					<button>X</button>
					<div>
						FJASKFAJL;KAPK;AK
					</div>
					<button>确认</button>
					<button>取消</button>
				</div>
			</div> -->
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data() {
			const btn_config = [
				{
					text:"增加"
				},
				{
					text:"减少"
				},
				{
					text:"删除"
				},
				{
					text:"修改"
				},
				
			]
			return{
				goods:[
					{
						title:'西湖龙井',
						price:30,
						chooseNum:0,
						allPrice:0,
						btn_config
					},
					{
						title:'武夷大红袍',
						price:30,
						chooseNum:0,
						allPrice:0,
						btn_config
					},
					{
						title:'云南普洱',
						price:30,
						chooseNum:0,
						allPrice:0,
						btn_config
					},
				]
			}
		}
	})
	
	const vm = app.mount("#app")
</script>